<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增轮播图')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-banner-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">轮播名称：</label>
                <div class="col-sm-8">
                    <input name="bannerTitle" class="form-control" type="text" required>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">轮播图类型</label>
                <div class="col-sm-8">
                    <select name="bannerType" class="form-control m-b">
                        <option value="1">首页顶部</option>
                        <option value="2">首页加盟</option>
                        <option value="3">预留1</option>

                    </select>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>预留可根据类型选择显示位置</span>
                </div>
            </div>
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label">状态：1：正常，:0：禁用：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <div class="radio-box">-->
<!--                        <input type="radio" name="status" value="">-->
<!--                        <label th:for="status" th:text="未知"></label>-->
<!--                    </div>-->
<!--                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">跳转地址：</label>
                <div class="col-sm-8">
                    <input name="bannerUrl" class="form-control" type="text">
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>点击banner跳转的文章地址</span>
                </div>
            </div>
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label is-required">banner封面图：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    &lt;!&ndash;                    <input name="newsLogo" class="form-control" type="text" required>&ndash;&gt;-->
<!--                    <input id="img_put" class="form-control" name="bannerImg" type="text" />-->
<!--&lt;!&ndash;                    <div id="img_url">&ndash;&gt;-->
<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
<!--                    <img id="img_url" style='width: 100px;height: 100px;'></img>-->
<!--                    <div id="zyupload" class="zyupload"></div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label class="font-noraml">banner封面图</label>-->
<!--                <div class="file-loading">-->
<!--                    <input class="file" type="file" id="uploadfile" name="bannerImg" multiple data-min-file-count="1" data-theme="fas">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="font-noraml">banner封面图</label>
                <input id="img_put" class="form-control" name="bannerImg" type="text" >
                <div class="file-loading">
                    <input id="fileinput-demo-1" name="file"  type="file" multiple>
                </div>
            </div>

<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label">对象id，和链接类型关联：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="objectId" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script type="text/javascript">
        var prefix = ctx + "jsrh/banner"
        $("#form-banner-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-banner-add').serialize());
            }
        }


        $(document).ready(function () {
            $("#fileinput-demo-1").fileinput({
                'theme': 'explorer-fas',
                'uploadUrl': '/common/upload',
                overwriteInitial: false,
                initialPreviewAsData: true,
                maxFileCount: 0,
                initialPreview: [
                    // "/img/profile.jpg"
                ]
            });

            $("#fileinput-demo-1").on("fileuploaded", function (event, data, previewId, index) {
                console.log(111)
                console.log(data)
                if(data !=null && data.response.code == 0){
                    $("#img_put").val(data.response.url)
                }
            })

        });

        // $(function () {
        //
        //     //setUeEditor('container',"${(productInfo.introduce)!''}")
        //
        //     var imgList = "";
        //     $("#zyupload").zyUpload({
        //         width: "100%",                 // 宽度
        //         height: "400px",                 // 宽度
        //         itemWidth: "140px",                 // 文件项的宽度
        //         itemHeight: "115px",                 // 文件项的高度
        //         // url: "/site/common/upload/images",  // 上传文件的路径
        //         url: "/common/upload",  // 上传文件的路径
        //         fileType: ["jpg", "png", "PNG", "JPG"],// 上传文件的类型
        //         fileSize: 51200000,                // 上传文件的大小
        //         multiple: false,                    // 是否可以多个文件上传
        //         dragDrop: true,                    // 是否可以拖动上传文件
        //         tailor: true,                    // 是否可以裁剪图片
        //         del: true,                    // 是否可以删除文件
        //         finishDel: false,                    // 是否在上传文件完成后删除预览
        //         /* 外部获得的回调接口 */
        //         // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
        //         onSelect: function (selectFiles, allFiles) {
        //         },
        //         // 删除一个文件的回调方法
        //         onDelete: function (file) {
        //         },
        //         // 每文件上传成功的回调方法
        //         onSuccess: function (file, result) {
        //             alert("此文件上传成功：" + file.name);
        //             var result = JSON.parse(result);
        //
        //             if (result.code == web_status.SUCCESS) {
        //                 $("#img_put").val(result.url)
        //                 $("#img_url").attr('src', result.url);
        //
        //             } else {
        //                 $.modal.alertError(result.msg);
        //             }
        //         },
        //         // 文件上传失败的回调方法
        //         onFailure: function (file, response) {
        //             alert("此文件上传失败:" + file.name);
        //         },
        //         // 上传完成的回调方法
        //         onComplete: function (response) {
        //
        //         }
        //     });
        // })

    </script>
</body>
</html>